<template>
	<view class="tui-container">
		<view class="tui-rolling-news-notice">
			<tui-icon class="tui-icon-notice"  name="news-fill" :size='20' color='#f54f46'></tui-icon>
			<swiper autoplay circular :interval="3000" class="tui-swiper-notice">
				<swiper-item v-for="(item,index) in notifyList" :key="index" class="tui-swiper-item-notice">
					<view class="tui-news-item-notice" @tap="toNotifyDetail(item.content,item.createTime)">{{item.content}}</view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="tui-searchbox">
			<view class="tui-rolling-search_container">
				<view class="tui-rolling-search_city" hover-class="opcity" :hover-stay-time="150">
					<!-- <text class="icon location">{{ iconLocation }}</text> -->
					<!-- <image src="../../static/images/home/diy-64.png" style="height: 60rpx;width: 60rpx;"></image> -->
					<text style="color: #5677FC;font-size: 26rpx;text-overflow: ellipsis;font-weight: bold;" @tap="toSelectCity">{{ cityName }}</text>
				</view>

				<view class="tui-rolling-search">
					<!-- #ifdef APP-PLUS || MP -->
					<icon type="search" :size="13" color="#999"></icon>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view class="tui-icon-box"><tui-icon name="search" :size="16" color="#999"></tui-icon></view>
					<!-- #endif -->
					<swiper vertical autoplay circular interval="8000" class="tui-swiper">
						<swiper-item v-for="(item, index) in hotSearch" :key="index" class="tui-swiper-item" @tap="search">
							<view class="tui-hot-item">大家正在搜：{{ item.content }}</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<!--banner-->
		<swiper
			indicator-dots
			autoplay
			circular
			:interval="5000"
			:duration="150"
			indicator-color="rgba(255, 255, 255, 0.9)"
			indicator-active-color="#5677fc"
			class="tui-banner-swiper"
		>
			<swiper-item v-for="(item, index) in banner" :key="index" 
			@tap="bannerDetail(item.linkType,item.linkData)">
				<view class="tui-banner-title">{{ item.remark }}</view>
				<image :src="$cdn.ad + item.imgSrc" class="tui-slide-image" mode="widthFix" />
			</swiper-item>
		</swiper>

		<!-- 		<tui-grid style="border-right: none;">
			<block v-for="(item, index) in iconList" :key="index">
				<tui-grid-item cell="5" style="text-align: center;">
					<image src="../../static/images/home/diy-64.png" style="height: 40px;width: 40px;"></image>
					<text class="tui-grid-label tui-grid-label-5">{{ item.name }}</text>
				</tui-grid-item>
			</block>
		</tui-grid> -->

		<!--classify分类专区-->
		<view class="tui-classify-box">
			<view
				class="tui-classify-item"
				v-for="(item, index) in actTypeList"
				:key="index"
				@tap="toClassifyActList(item.actTypeId, item.title)"
				hover-class="opcity"
				:hover-stay-time="150"
			>
				<image :src="$cdn.actType + item.pic" class="tui-classify-img" />
				<view class="tui-classify-name">{{ item.title }}</view>
			</view>
		</view>

<!-- 		<view class="tui-flex">
			<view class="example-title tui-col-10">有趣的人</view>
			<view @tap="toMemberList" hover-class="opcity" :hover-stay-time="150" class="example-title-right tui-col-2">更多></view>
		</view> -->
		<!--classify-->
		<!-- 		<view class="example-title-main">
			<view class="example-title-left">有趣的人</view>
			<view class="example-title-right">更多</view>
		</view> -->
<!-- 		<view class="tui-classify-box">
			<view class="tui-classify-item-col4" v-for="(item, index) in memberList" :key="index" @tap="toMemberDetail(item.memberId, item.userName)" :data-key="item.name">
				<image :src="$cdn.appAvatar + item.headPic" class="tui-classify-img-col4" mode="aspectFit"/>
				<view class="tui-classify-name-member">{{ item.userName }}</view>
			</view>
		</view> -->

		<view class="example-title">有趣推荐</view>
		<tui-card class="tui-card" v-for="(item, index) in dataList" :key="index" 
		:titleText="tui.geetWeek(item.startTime)+'  '+item.startTime.substring(5,16)+' 至 '+item.endTime.substring(5,16)"
		@tap="detailAct(item.actId)">
			<template v-slot:body>
				<view class="tui-article">
					<image mode="aspectFill" :src="$cdn.actCoverImg + item.coverImg" class="tui-article-img"></image>
					<view v-if="dateUtil.compareDate(new Date(),item.endTime)" class="tui-article-title-status span-no">已结束</view>
					<view v-else class="tui-article-title-status span-red">召集中</view>
					<view class="tui-article-title">{{ item.actTitle }}</view>
				</view>
			</template>
		</tui-card>

		<!-- 开屏广告 -->
		<cmd-curtain :visible="adCoopenListVisibleVal" mode="bottom">
		  <image mode="aspectFit" :src="adCoopenSrc" class="tui-slide-image"></image>
		</cmd-curtain>

		<tui-tips ref="toast" position="center"></tui-tips>
		<!--加载loadding-->
		<tui-loadmore :visible="loadding" :index="3" type="primary"></tui-loadmore>
		<tui-nomore :visible="!pullUpOn" bgcolor="#f2f2f2"></tui-nomore>
		<!--加载loadding-->
	</view>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';

import tuiIcon from '@/components/icon/icon';
import tuiTag from '@/components/tag/tag';
import tuiListCell from '@/components/list-cell/list-cell';
import tuiLoadmore from '@/components/loadmore/loadmore';
import tuiNomore from '@/components/nomore/nomore';
import tuiTips from '@/components/tips/tips';

import tuiGrid from '@/components/grid/grid';
import tuiGridItem from '@/components/grid-item/grid-item';
import tuiCard from '@/components/card/card';

const QQMapWX = require('../../libs/qqmap-wx-jssdk.min.js');
const dateUtil = require('../../common/dateUtil.js');
import cmdCurtain from "@/components/cmd-curtain/cmd-curtain.vue"

export default {
	computed: mapState(['cityName', 'cityCode', 'latitude', 'longitude','adCoopenListVisible']),
	components: {
		tuiIcon,
		tuiTag,
		tuiListCell,
		tuiLoadmore,
		tuiNomore,
		tuiTips,
		tuiGrid,
		tuiGridItem,
		tuiCard,
		cmdCurtain
	},
	beforeCreate() {
		/* 		const domModule = weex.requireModule('dom');
		domModule.addRule('fontFace', {
			fontFamily: 'iconfont',
			src: "url('https://at.alicdn.com/t/font_1087442_fe5vigfwr5m.ttf')"
		}); */
	},
	created() {
		// this.getHomeData();
	},
	data() {
		return {
			$cdn: this.$cdn,
			hotSearch: [],
			actTypeList: [],
			// memberList: [],
			banner: [],
			dataList: [],
			dateUtil:dateUtil,

			qqmapsdk: null,
			animation: false,
			notifyList:[],
			adCoopenList:[],  //开屏广告
			adCoopenListVisibleVal:false,
			adCoopenSrc:'',

			// 分页必备参数
			isNoData: false,
			pageIndex: 1,
			loadding: false,
			pullUpOn: true
		};
	},
	onLoad: function() {
		this.$eventHub.$on('emit', data => {
			this.getLonglatByLocation(this.cityName);
		});
		this.getHomeData(false, false);

		this.qqmapsdk = new QQMapWX({
			key: 'W4WBZ-TUD65-IDAIR-QPM36-HMFQ5-CGBZP'
		});
		// uni原生接口获取位置==>通过经纬度翻译地址
		this.getAddress();
		
		setTimeout(() => {
			// this.getLonglatByLocation();
			// 根据经纬度获取地理位置
			// this.getAddress(this.longitude, this.latitude);
					// this.getAddress();
		}, 1500);
	},
	methods: {
		// 获取位置
		...mapMutations(['setUserInfo','setCurLocalAddress','setAdCoopenListVisible']),
		getAddress: function() {
			let that=this;
			// uniapp 原生接口获取经纬度
			uni.getLocation({
				type: 'gcj02',
				success(res) {
					that.setUserInfo({ longitude: res.longitude, latitude: res.latitude });
					console.log('currentLocation-latitude=' + res.latitude);
					console.log('currentLocation-longitude=' + res.longitude);

					// 根据经纬度获取地址信息
					that.qqmapsdk.reverseGeocoder({
						location: {
							latitude:  res.latitude,
							longitude: res.longitude
						},
						success: resTwo => {
							console.log(JSON.stringify(resTwo));
							that.setUserInfo({ cityName: resTwo.result.address_component.city, cityCode: resTwo.result.ad_info.adcode });
							// this.address = res.result.formatted_addresses.recommend;
							that.setCurLocalAddress(resTwo.result.address);
						},
						fail: res => {
							// this.address = '获取位置信息失败';
						}
					});
				}
			});
		},
		// 是否展示刷新成功提示
		isShowRefresh(isRefresh) {
			if (isRefresh) {
				let options = {
					msg: '刷新成功',
					duration: 2000,
					type: 'translucent'
				};
				this.$refs.toast.showTips(options);
				// 关闭下拉刷新loading
				uni.stopPullDownRefresh();
			}
		},
		// 位置获取经纬度(根据城市获取经纬度)，地址列表选择后，返回执行
		getLonglatByLocation: function(cityName) {
			let that = this;
			that.qqmapsdk.geocoder({
				address: cityName,
				success: function(resTwo) {
					console.log('getLonglatByLocation=' + JSON.stringify(resTwo));
					// that.latitude = res.result.location.lat;
					// that.longitude = res.result.location.lng;
					that.setUserInfo({ latitude: resTwo.result.location.lat, longitude: resTwo.result.location.lng });
					that.setUserInfo({ cityName: resTwo.result.address_components.city, cityCode: resTwo.result.ad_info.adcode });
					// 省编码，省名称，区编码，区名称（待开发）
					
					that.setCurLocalAddress(resTwo.result.address_components.city);
				}
			});
		},
		search: function() {
			uni.navigateTo({
				url: 'news-search'
			});
		},
		bannerDetail: function(linkType,linkData) {
			let url='';
			if(linkType==0){
				url='../act/act-detail?actId=' + linkData
			}else if(linkType==1){
				url='../member/member-detail?memberId=' + linkData
			}
			uni.navigateTo({
				url: url
			});
		},
		toSelectCity() {
			uni.navigateTo({
				url: '../common/select-city'
			});
		},
		// 聚会详情页
		detailAct(actId) {
			uni.navigateTo({
				url: '../act/act-detail?actId=' + actId
			});
		},
		toClassifyActList(actTypeId, title) {
			uni.navigateTo({
				url: '../act/act-classify-list?actTypeId=' + actTypeId + '&title=' + title
			});
		},
		toNotifyDetail(content, time) {
			uni.navigateTo({
				url: '../system/notify-detail?content=' + content + '&time=' + time
			});
		},
		toMemberDetail(memberId, userName) {
			uni.navigateTo({
				url: '../member/member-detail?memberId=' + memberId + '&userName=' + userName
			});
		},
		toMemberList() {
			uni.navigateTo({
				url: '../member/member-list'
			});
		},
		// 获取首页数据
		getHomeData(isRefresh, hideLoading) {
			//参数
			let postData = {};
			this.tui
				.request(this.$api.getHomeData, postData, 'POST', false, hideLoading)
				.then(res => {
					// 如是下拉刷新则待请求完成提示刷新成功
					this.isShowRefresh(isRefresh);
					if (res.code == 0) {
						this.banner = res.data.adList;
						this.hotSearch = res.data.hotSearchList;
						this.dataList = res.data.actList;
						this.notifyList = res.data.notifyList;
						this.actTypeList = res.data.actTypeList;
						this.adCoopenList=res.data.adCoopenList;
						// console.log('getHomeData end=' + JSON.stringify(res));
						// 判断是否展示，只第一次展示
						if(this.adCoopenListVisible==false){
							this.adCoopenSrc=this.$cdn.ad + this.adCoopenList[0].imgSrc;
							this.adCoopenListVisibleVal=true;
							this.setAdCoopenListVisible(true);
						}
					}
				})
				.catch(res => {
					console.log(res);
				});
		},
		// 获取
		getMoreActList(pageIndex, isRefresh, postData) {
			this.tui
				.request(this.$api.getMoreActList + '?pageNum=' + pageIndex + '&pageSize=' + this.$api.pageSize, postData, 'POST', false, pageIndex == 1 && !isRefresh ? false : true)
				.then(res => {
					// 如是下拉刷新则待请求完成提示刷新成功
					this.isShowRefresh(isRefresh);
					if (res.code == 0) {
						if (pageIndex == 1) {
							this.dataList = res.data.rows;
						} else {
							this.dataList = this.dataList.concat(res.data.rows);
							// 隐藏加载更多loading
							this.loadding = false;
						}
		
						// 如已是最后一条，则提示无加载更多
						if (this.dataList.length >= res.data.total) {
							this.pullUpOn = false;
							this.loadding = false;
						}
					} else {
						this.tui.toast('失败，' + res.msg);
					}
				})
				.catch(res => {
					console.log(res);
				});
		}
	},
	//页面相关事件处理函数--监听用户下拉动作
	onPullDownRefresh: function() {
		// 重新拉取新数据
		this.getHomeData(true, true);
		this.pageIndex = 1;
		this.pullUpOn = true;
		this.loadding = false;
	},
	// 页面上拉触底事件的处理函数
	onReachBottom: function() {
		if (!this.pullUpOn) return;
		// 显示加载更多loading
		this.loadding = true;
		this.getMoreActList(++this.pageIndex, false,{});
	}
};
</script>

<style>
/* @import '../../static/style/thorui.css'; */
page {
	background: #f2f2f2;
}

.tui-container {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding-bottom: env(safe-area-inset-bottom);
}

.tui-searchbox {
	padding: 16rpx 20rpx;
	box-sizing: border-box;
}

.tui-rolling-search_container {
	display: flex;
	flex-flow: nowrap;
}

.tui-rolling-search_city {
	width: 20%;
	height: 60rpx;
	line-height: 60rpx;
	/* padding: 0 10rpx 0 0; */
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	justify-content: center;
	overflow-x: hidden;
	font-size: 88rpx !important;
}

.tui-rolling-search {
	width: 80%;
	height: 60rpx;
	border-radius: 35rpx;
	padding: 0 40rpx 0 30rpx;
	box-sizing: border-box;
	background: #fff;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	color: #999;
}

.tui-swiper {
	font-size: 26rpx;
	height: 60rpx;
	flex: 1;
	padding-left: 12rpx;
}

.tui-swiper-item {
	display: flex;
	align-items: center;
}

.tui-hot-item {
	line-height: 26rpx;
	white-space: nowrap;
	/* overflow: hidden; */
	text-overflow: ellipsis;
}

.tui-banner-swiper {
	width: 100%;
	height: 300rpx;
	position: relative;
}

.tui-slide-image {
	width: 100%;
	height: 300rpx;
	display: block;
}

.tui-banner-title {
	width: 100%;
	height: 70rpx;
	position: absolute;
	z-index: 9999;
	color: #fff;
	bottom: 0;
	padding: 0 30rpx;
	padding-top: 16rpx;
	font-size: 26rpx;
	/* font-weight: bold; */
	background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
	box-sizing: border-box;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* #ifdef APP-PLUS || MP */
.tui-banner-swiper .wx-swiper-dots.wx-swiper-dots-horizontal {
	width: 100%;
	top: 280rpx;
	text-align: right;
	padding-right: 30rpx;
	box-sizing: border-box;
}

.tui-banner-swiper .wx-swiper-dot {
	width: 8rpx;
	height: 8rpx;
	display: inline-flex;
	background: none;
	justify-content: space-between;
}

.tui-banner-swiper .wx-swiper-dot::before {
	content: '';
	flex-grow: 1;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 8rpx;
}

.tui-banner-swiper .wx-swiper-dot-active::before {
	background: #5677fc;
}

.tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
	width: 18rpx;
}

/* #endif */

/* #ifdef H5 */
>>> .tui-banner-swiper .uni-swiper-dots.uni-swiper-dots-horizontal {
	width: 100%;
	top: 280rpx;
	text-align: right;
	padding-right: 30rpx;
	box-sizing: border-box;
}

>>> .tui-banner-swiper .uni-swiper-dot {
	width: 8rpx;
	height: 8rpx;
	display: inline-flex;
	background: none;
	justify-content: space-between;
}

>>> .tui-banner-swiper .uni-swiper-dot::before {
	content: '';
	flex-grow: 1;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 8rpx;
}

>>> .tui-banner-swiper .uni-swiper-dot-active::before {
	background: #5677fc;
}

>>> .tui-banner-swiper .uni-swiper-dot.uni-swiper-dot-active {
	width: 18rpx;
}

/* #endif */

.tui-news-flex {
	width: 100%;
	display: flex;
}

.tui-flex-start {
	align-items: flex-start !important;
}

.tui-flex-center {
	align-items: center !important;
}

.tui-flex-column {
	flex-direction: column !important;
}

.tui-flex-between {
	justify-content: space-between !important;
}

.tui-news-cell {
	display: flex;
	padding: 20rpx 30rpx;
}

.tui-news-tbox {
	flex: 1;
	width: 100%;
	box-sizing: border-box;
	display: flex;
}

.tui-news-picbox {
	display: flex;
	position: relative;
}

.tui-w220 {
	width: 220rpx;
}

.tui-h165 {
	height: 165rpx;
}

.tui-block {
	display: block;
}

.tui-w-full {
	width: 100%;
}

.tui-one-third {
	width: 33%;
}

.tui-news-title {
	width: 100%;
	font-size: 34rpx;
	word-break: break-all;
	word-wrap: break-word;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	box-sizing: border-box;
}

.tui-pl-20 {
	padding-left: 20rpx;
}

.tui-pt20 {
	padding-top: 20rpx;
}

.tui-sub-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #999;
	box-sizing: border-box;
	line-height: 24rpx;
}

.tui-sub-source {
	font-size: 26rpx;
}

.tui-sub-cmt {
	font-size: 24rpx;
	line-height: 24rpx;
	display: flex;
	align-items: center;
}

.tui-tag {
	padding: 2rpx 6rpx !important;
	margin-left: 10rpx;
}

.tui-scale {
	transform: scale(0.6);
	transform-origin: center center;
}

.tui-btm-badge {
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: 24rpx;
	color: #fff;
	padding: 2rpx 12rpx;
	background: rgba(0, 0, 0, 0.6);
	z-index: 20;
	transform: scale(0.8);
	transform-origin: 100% 100%;
}

.tui-video {
	position: absolute;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	transform-origin: 0 0;
}

.tui-icon {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	padding: 26rpx;
}

.tui-icon-box .tui-icon {
	background: none;
	padding: 0;
	border-radius: 0;
}

/* 	.tui-title {
		padding: 50upx 30upx 30upx 30upx;
		font-size: 32upx;
		color: #333;
		box-sizing: border-box;
		font-weight: bold;
		clear: both;
	} */

/* 	.tui-grid-icon {
		width: 64upx;
		height: 64upx;
		margin: 0 auto;
		text-align: center;
		vertical-align: middle;
	}
	*/
.tui-grid-label {
	display: block;
	text-align: center;
	font-weight: 400;
	color: #333;
	font-size: 24upx;
	white-space: nowrap;
	overflow: hidden;
	/* text-overflow: ellipsis; */
	margin-top: 10upx;
}
.tui-grid-label-5 {
	margin-top: 0 !important;
	color: #5677fc !important;
}

/*classify*/

.tui-classify-box {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 0;
	background-color: #fff;
}

.tui-classify-item {
	width: 20%;
	text-align: center;
}

.tui-classify-item-col4 {
	width: 25%;
	text-align: center;
	margin-bottom: 16rpx;
}

.tui-classify-img-col4 {
	width: 150rpx;
	height: 150rpx;
	border-radius: 6%;
}

.tui-classify-img {
	width: 88rpx;
	height: 88rpx;
	margin-top: 30rpx;
}

.tui-classify-name {
	font-size: 26rpx;
	line-height: 26rpx;
	padding-top: 8rpx;
	color: #555;
	white-space: nowrap;
}
.tui-classify-name-member {
	font-size: 26rpx;
	line-height: 26rpx;
	/* padding-top: 8rpx; */
	color: #555;
	white-space: nowrap;
}

/*classify*/

/* title */
.example-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 28upx;
	font-weight: bold;
	color: #5677fc;
	padding: 20upx 20upx 20upx 30upx;
	margin-top: 0upx;
	position: relative;
	background-color: #fdfdfd;
	/* border-bottom: 1px #f5f5f5 solid */
}
.example-title-right {
	display: flex;
	font-size: 28upx;
	font-weight: bold;
	color: #5677fc;
	padding: 20upx 0upx 20upx 30upx;
	margin-top: 0upx;
	position: relative;
	background-color: #fdfdfd;
	/* text-decoration: underline; */
}
/* title */

/* card */
.tui-card {
	padding: 10upx 10upx;
	margin: 10rpx 4rpx 10rpx 4rpx !important;
}

.tui-article {
	position: relative;
}

.tui-article-img {
	width: 100%;
	height: 340upx;
	/* border-radius: 10%; */
	/* display: block; */
}
.tui-article-title {
	position: absolute;
	left: 0;
	bottom: 0;
	color: #fff;
	font-size: 28upx;
	font-weight: 500;
	box-sizing: border-box;
	padding: 20upx 30upx;
	background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));	
}
.tui-article-title-status {
	position: absolute;
	left: 0;
	top: 0;
	color: #fff;
	font-size: 28upx;
	font-weight: 500;
	box-sizing: border-box;
	padding: 5upx 8upx;
	/* border-radius: 10%; */
}
.span-red {
	background-color: #FF7900;
	/* border-radius: 10%; */
}
.span-no {
	background-color: #80849f;
	/* border-radius: 10%; */
}
/* card */
.tui-flex {
	display: -webkit-flex;
	display: flex;
}
.tui-col-10 {
	width: 83.33333333%;
}
.tui-col-2 {
	width: 16.66666667%;
}
/* notice */
	.tui-rolling-news-notice {
		width: 100%;
		padding: 12upx 20upx 12upx 0upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: nowrap;
		height: 34px;
		background-color: #fff8d5;
	}
	.tui-icon-notice{
		background: none;
		padding-right: 6px;
	}

	.tui-swiper-notice {
		font-size: 28upx;
		height: 50upx;
		flex: 1;
	}

	.tui-swiper-item-notice {
		display: flex;
		align-items: center
	}

	.tui-news-item-notice {
		line-height: 28upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #f54f46;
	}
</style>
